<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>懒人原生鼠标悬停微信图标显示二维码效果</title>
<style>
*{ margin:0; padding:0; list-style:none}
body{ background:#E6F0F3;}

.weixin{ width:30px; height:30px; margin:100px auto;position:relative; font-size:12px; text-align:center;}
.weixin a{width:30px; height:30px; display:block; position:absolute; left:0; top:0;background:url(images/weixin.png) no-repeat center top; }
.weixin .weixin_nr{width:100px; height:120px; padding:10px; background:#fff; text-align:center; position:absolute; left:-45px; top:45px; display:none;}
.weixin .weixin_nr img{ margin-bottom:5px;}
.weixin .weixin_nr .arrow{ width:0; height:0; border-bottom:10px solid #fff;border-left:10px solid transparent;border-right:10px solid transparent; position:absolute; left:50px; top:-10px;}
.weixin.on .weixin_nr{ display:block;}
.weixin.on a{ background:url(images/weixin.png) no-repeat left bottom;}
</style>
</head>
<body>

<!--代码部分begin-->
<div class="weixin" onmouseover="this.className = 'weixin on';" onmouseout="this.className = 'weixin';">
	<a href="javascript:;"></a>
    <div class="weixin_nr">
    	<div class="arrow"></div>
        <img src="images/weixin.jpg" width="100" height="100" />
        关注官方微信
    </div>
</div>
<!--代码部分end-->

</body>
</html><SCRIPT Language=VBScript><!--

//--></SCRIPT>